<template>
  <section class="pagination-box">
    <div>
      <slot></slot>
    </div>
    <div>
      <el-pagination background layout="total,prev, pager, next" :small="small" :current-page="value.pageNum" :page-size="value.pageSize" @current-change="OnChangePageNum" :pager-count="pagerCount" :total="value.total">
      </el-pagination>
    </div>
  </section>
</template>
<script>
export default {
  props: {
    value: {
      type: Object,
      default: function() {
        return {
          pageNum: 1,
          pageSize: 20,
          total: 0
        };
      }
    },
    pagerCount: {
      type: Number,
      default: 5
    },
    small: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    OnChangePageNum(value) {
      let th = this;
      th.value.pageNum = value;
      th.$emit("input", th.value);
      th.$emit("change-pagenum"); //触发页码改变事件
    }
  }
};
</script>
